<template>
    <div @click="hide"><!-- 此div起到蒙层的效果，点击可关闭，而且比蒙层更方便 -->
        <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <cube-popup v-show="visibility" position="bottom">
                <div style="flex:1">xxx</div>
                <transition enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown">
                    <div v-show="visibility" class="list-wrapper" @click.stop>
                        <ul>
                            <li class="food title">
                                <div class="name title">名称</div>
                                <div class="clear title" @click="clear">清除</div>
                            </li>
                        </ul>
                        <cube-scroll class="list-scroll" :options="options" ref="listScroll">
                            <ul>
                                <li v-for="(food, index) in selectedFoods" :key="index" class="food">
                                    <div class="name">{{food.name}}</div>
                                    <div class="price"><em>￥ </em>{{food.price* food.count}}</div>
                                    <div class="goods-wanted">
                                        <select-goods v-show="food.count" :food="food"></select-goods>
                                    </div>
                                </li>
                            </ul>
                        </cube-scroll>
                    </div>
                </transition>
            </cube-popup>
        </transition>
    </div>
</template>

<script>
    import SelectGoods from '../select/selectGoods'
    import Roll from '../transition/roll'
    export default {
        name: "shopCartList",
        data(){return{
            visibility: false,
            options:{
                click: false,
                mouseWheel: true,
            }
        }},
        components:{
            SelectGoods, Roll
        },
        props:{
            selectedFoods: Array
        },
        methods:{
            show(){
                this.visibility= true
                console.log('list show')
            },
            hide(){
                this.visibility= false
            },
            toggle(){console.log(this.visibility)
                this.visibility = !this.visibility
                this.$nextTick(()=>
                    this.$refs.listScroll.refresh()     //有时候不滚动，加上这个保险
                )
                console.log(this.visibility)
            },
            clear(){
                console.log(this.selectedFoods)
                this.$createDialog({
                    icon: 'cubeic-warn',
                    type: 'confirm',
                    title: '清空购物车',
                    content:'确定要清空吗？',
                    onConfirm:()=> {
                        this.selectedFoods.forEach((food)=>{
                            food.count=0
                        })
                        this.hide()
                    },
                }).show()
            }
        },
    }
</script>

<style scoped lang="stylus">
    >>>.cube-popup-content
        height:100%
        background-color:rgba(127, 0, 0, 0.2)
        display:flex
        flex-flow:column
        align-items:flex-end
    .list-wrapper
        width: 100%
        max-height: 20%
        background-color:white
        bottom: 48px
        position:relative
        .list-scroll
            width:100%
            overflow:hidden
            max-height:100px
        .food
            height: 28px
            padding: 2px 8px
            display:flex
            align-items:center
            &.title
                background-color:lightgray
                font-size: 1.1em
            .name
                flex:1
            .price
                font-weight:bold
                font-size: 1.2em
                color: red
                width: 80px
                em
                    font-size: 0.8em
            .goods-wanted
                width:80px
                height:100%
                position: relative
                display:block

</style>